import React, {Component} from 'react';
import {
    View,
    Text,
    StatusBar,
    StyleSheet,
    Image,
    Platform,
    NativeModules,
} from 'react-native';
import TabNavigator from 'react-native-tab-navigator';
import SplashScreen from 'react-native-splash-screen';

import DestinationContainer from '../Containers/DestinationContainer';
import URuralContainer from '../Containers/URuralContainer';
import RuralLibraryContainer from '../Containers/RuralLibraryContainer';
import FoundContainer from '../Containers/FoundContainer';
import LibraryContainer from '../Containers/LibraryContainer';
import FaXianContainer from '../Containers/FaXianContainer';
import MineContainer from '../Containers/MineContainer';
import Global from '../Commom/GlobalConst';
// import JPushModule from 'jpush-react-native';
import {connect} from 'react-redux';

import RCTDeviceEventEmitter from 'RCTDeviceEventEmitter'
const tabBarItems = [
    {
        title: '推荐',
        icon: () => <Image source={require('../../Image/main/icon_destination_gray.png')} style={styles.iconimage}/>,
        selectedicon: () => <Image source={require('../../Image/main/icon_destination.png')} style={styles.iconimage}/>,
        component: URuralContainer
    },
    // {
    //     title: '目的地',
    //     icon: () => <Image source={require('../../Image/main/icon_destination_gray.png')} style={styles.iconimage}/>,
    //     selectedicon: () => <Image source={require('../../Image/main/icon_destination.png')} style={styles.iconimage}/>,
    //     component: DestinationContainer
    // },
    // {
    //     title: '乡村馆',
    //     icon: () => <Image source={require('../../Image/main/icon_rural_library_gray.png')} style={styles.iconimage}/>,
    //     selectedicon: () => <Image source={require('../../Image/main/icon_rural_library.png')}
    //                                style={styles.iconimage}/>,
    //     component: RuralLibraryContainer
    // },
    {
        title: '乡村',
        icon: () => <Image source={require('../../Image/main/icon_rural_library_gray.png')} style={styles.iconimage}/>,
        selectedicon: () => <Image source={require('../../Image/main/icon_rural_library.png')}
                                   style={styles.iconimage}/>,
        component: LibraryContainer
    },
    // {
    //     title: '发现',
    //     icon: () =><Image source={require('../../Image/main/icon_found_gray.png')} style={styles.iconimage}/>,
    //     selectedicon: () => <Image source={require('../../Image/main/icon_found.png')} style={styles.iconimage}/>,
    //     component: FoundContainer
    // },
    {
        title: '发现',
        icon: () =><Image source={require('../../Image/main/icon_found_gray.png')} style={styles.iconimage}/>,
        selectedicon: () => <Image source={require('../../Image/main/icon_found.png')} style={styles.iconimage}/>,
        component: FaXianContainer
    },
    {
        title: '我的',
        icon: () => <Image source={require('../../Image/main/icon_mine_gray.png')} style={styles.iconimage}/>,
        selectedicon: () => <Image source={require('../../Image/main/icon_mine.png')} style={styles.iconimage}/>,
        component: MineContainer
    },
]
class Main extends Component {
    constructor(props) {
        super(props);
        this.state = {
            selectedTab: tabBarItems[0].title,
            barstatus: 'default',
        };
    }

    componentDidMount() {
        this.GoToMap = RCTDeviceEventEmitter.addListener('GoToMap', this.GoToMap.bind(this));
        if (Platform.OS === 'ios') {
            // NativeModules.JPushModule.getRegistrationID((registrationId) => {
            //     Global.Const.registeredId = registrationId;
            //
            // });
        } else {
            // JPushModule.getRegistrationID((registrationId) => {
            //     Global.Const.registeredId = registrationId;
            //     console.log('registeredId', Global.Const.registeredId);
            // });
        }
    }
    GoToMap(){
        this.setState({
            selectedTab:'乡村',
        })
    }
    render() {
        return (

            <TabNavigator tabBarShadowStyle={{backgroundColor: '#F2F3F5'}}
                          tabBarStyle={{backgroundColor:Global.Const.colorWhite}}>
                {
                    tabBarItems.map((controller, i) => {
                        //获取容器页面
                        //下面就讲navigation 赋值进去,这样没有容器页面就有nav navigator = {this.props.navigator}
                        let Component = controller.component;
                        return (
                            <TabNavigator.Item
                                key={i}
                                selected={this.state.selectedTab === controller.title}
                                title={controller.title}
                                titleStyle={{color:'gray',fontSize:10}}
                                selectedTitleStyle={{color:'#24CD78',fontSize:10}}
                                renderIcon={controller.icon}
                                renderSelectedIcon={controller.selectedicon}
                                onPress={() => {
                                    if(i==3){
                                        this.setState({
                                            selectedTab: controller.title,
                                            barstatus:'light-content',
                                        })
                                    }
                                    else{
                                        this.setState({
                                            selectedTab: controller.title,
                                            barstatus:'default',
                                        })
                                    }
                                }}>
                                <Component {...this.props} barstatus={this.state.barstatus}/>
                            </TabNavigator.Item>
                        )
                    })
                }
            </TabNavigator>

        );
    }
}
const styles = StyleSheet.create({
    iconimage: {
        width: 23,
        height: 23,
        resizeMode: 'contain',
    },
});
export default connect((state) => {
    return {ShowCloseReducer} = state;
})(Main);
